<template>
    <!-- 这是App的孩子 -->
    <div>
        <div v-show="isleft">{{ left }}</div>
        Navdad--{{ title }}
        <button v-show="isright">{{ right }}</button>
    </div>
</template>
<script>
export default{
    // my-title用-连接的属性名就用驼峰接收 myTitle

    // 所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化 ，自然地将新的状态向下流往子组件，而不会逆向传递。
    // 这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。
        //    props:['title','left','right','isleft','isright']


        // 属性验证
        props:{
            // 给属性只能传字符串类型String
            title:String,
            //给属性只能传字符串类型String 也可以是Number类型
            left:[String,Number],
            right:{
                // 会提示你就是必需有这个属性
                required:true,
                // 固定 Validator (){}
                // 判断这个是是不是在这里面的
                // 自定义效验函数 
                validator(value){
                           return ['no','yes','so'].includes(value)
                }
            },
            isleft:{
                // 会提示你就是必需有这个属性
                required:true,
                type:Boolean
            },
            // isright:Boolean
            // 这个等价上面这个
            isright:{
                type:Boolean,
                // 你不写也会有个默认的值
                default:true
            }
        }
   
}

</script>
<style scoped>
div{
    display: inline-block;
}
</style>